<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车位信息页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-green {
            background: green;
        }

        .bg-red {
            background: red;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            height: 150px;
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body style="margin: 0">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                     text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="15%"></el-aside>
            <el-main>
                <el-alert title="以下会显示所有车位的实时状态" type="info" show-icon></el-alert>
                <el-divider></el-divider>
                <!--栅格-->
                <!--表格行数由parkingSpaceList长度决定，当length能被8整除则行数为length/8，否则为length/8 注意v-for遍历数字从1开-->
                <el-row :gutter="20"
                        v-for="i in parkingSpaceList.length % 8 == 0? parkingSpaceList.length/8+1 : parkingSpaceList.length/8+2">
                    <el-col v-for="(item, index) in parkingSpaceList.slice(8*(i-1), 8*(i-1) + 8)" :span="3">
                        <!--一行显示8个单元格-->
                        <div class="grid-content" v-bind:class="item.locked?'bg-red':'bg-green'">
                            编号：<strong>{{item.id}}</strong><br/>
                            <strong>{{statusType[item.status]}}</strong>
                        </div>
                    </el-col>
                </el-row>

                <el-divider></el-divider>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="停车库车位示意图" name="1">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-image src="img/park/park.png"/>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                </el-collapse>

                <el-divider></el-divider>
                <el-button type="primary" onclick="javascript:location.href='reserve.html'">预约车位页面<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
                <el-button type="info" onclick="javascript:location.href='path.html'">停车引导页面<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-main>
            <el-aside width="15%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeNames: ['1'],
            //
            statusType: ['空闲', '占用', '被预定', '管理员锁定'],
            parkingSpaceList: []
        },
        methods: {
            findAll: function () {
                var that = this;
                axios.get("/park").then(
                    function (response) {
                        that.parkingSpaceList = response.data;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            }
        }
    });
    window.onload = function () {
        app.findAll();
    };

    //使用websocket显示实时车位信息
    var ip_addr = document.location.hostname;//服务器ip地址
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://" + ip_addr + ":8080/ws/park");
    } else {
        alert("浏览器不支持websocket");
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("WebSocket连接发生错误");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("WebSocket连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log(event.data);
        var jsonObj = JSON.parse(event.data);//把接收的json字符串转为对象
        app.parkingSpaceList.splice(jsonObj.id - 1, 1, jsonObj);//修改数组值要用splice，这里表示将索引为1开始的一个元素修修改为response.data
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("WebSocket连接关闭");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    //发送消息
    // function send() {
    //     var message = document.getElementById('text').value;
    //     websocket.send(message);
    // }
</script>
</body>
</html>